/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 挖掘查询-搜索主页
 */
import React from "react";
import "@/assets/style/search.scss";
import { message } from "antd";
import { observer, inject } from "mobx-react";

@inject("ExcavateQueryStore")
@observer
class EQuerySearch extends React.Component {
    state = {
        keyWords: ""
    };

    componentDidMount() {
        this.props.ExcavateQueryStore.getAmountData();
    }
    handleChange = e => {
        this.setState({
            keyWords: e.target.value.trim()
        });
    };
    handleSearch = () => {
        const { keyWords } = this.state;
        if (keyWords === "") {
            message.error("请输入关键词");
        }
        this.props.ExcavateQueryStore.changeKeyWords(keyWords);
        this.props.history.push("/main/excavateQuery/result");
    };
    render() {
        const {
            amountData: { all = 0, company = 0, person = 0 }
        } = this.props.ExcavateQueryStore;
        return (
            <div className="common-search">
                <div className="inner">
                    <h1 className="title">APP画像全息检索</h1>
                    <div className="splice">注册信息 / 关联对象 / 使用人群 / 风险评分</div>
                    <div className="search-wrap">
                        <input type="text" onChange={this.handleChange} placeholder="请输入任意APP或关键字" />
                        <button className="btn" onClick={this.handleSearch}>
                            搜索
                        </button>
                    </div>
                    <div className="amount-lists">
                        <div className="item all-item">
                            <p>
                                <span className="yellow-text">{all}</span>个
                            </p>
                            <p>全库样本 APP 数量</p>
                        </div>
                        <div className="item company-item">
                            <p>
                                <span className="yellow-text">{company}</span>个
                            </p>
                            <p>有企业关联 APP 数量</p>
                        </div>
                        <div className="item person-item">
                            <p>
                                <span className="yellow-text">{person}</span>个
                            </p>
                            <p>有管控人员关联</p>
                        </div>
                    </div>
                </div>
                <div className="EQuery-bottom">APP 数据挖掘及识别流程查看--跳转链接未做</div>
            </div>
        );
    }
}

export default EQuerySearch;
